<template>
  <div class="layout-demo">
    <a-layout style="height: 100vh">
      <a-layout-header>
        <icon-arrow-left
          @click="goBack"
          size="50"
          style="position: fixed; top: 3vw; left: 3vw; z-index: 999; color: white"
        />
      </a-layout-header>
      <a-layout-content>
        <div class="frame-aside">
          <a-steps :current="current" direction="vertical">
            <a-step>
              <div :style="{ position: 'relative', top: '-5vw' }">
                <h2>热身</h2>
                <p :style="{ position: 'relative', top: '-3vw' }">
                  这是热身的第一步，准备活动身体。
                </p>
              </div>
            </a-step>
            <a-step>
              <div :style="{ position: 'relative', top: '-5vw' }">
                <h2>热身</h2>
                <p :style="{ position: 'relative', top: '-3vw' }">
                  这是热身的第一步，准备活动身体。
                </p>
              </div>
            </a-step>
            <a-step>
              <div :style="{ position: 'relative', top: '-5vw' }">
                <h2>热身</h2>
                <p :style="{ position: 'relative', top: '-3vw' }">
                  这是热身的第一步，准备活动身体。
                </p>
              </div>
            </a-step>
          </a-steps>
        </div>
      </a-layout-content>
      <a-layout-footer>
        <div class="frame-main">
          <div class="main-bottom">
            <icon-apps size="40" />
            <a-button
              :disabled="current === 1"
              @click="onPrev"
              :style="{ backgroundColor: 'rgba(225, 225, 225, 0.5)', borderRadius: '50%' }"
            >
              <icon-backward size="40" :style="{ color: 'black' }" />
            </a-button>
            <icon-pause-circle-fill
              size="85"
              :style="{ color: 'blue', borderRadius: '50%' }"
              @click="flag = !flag"
              v-show="flag"
            />
            <icon-play-circle-fill
              size="85"
              :style="{ color: 'blue', borderRadius: '50%' }"
              @click="flag = !flag"
              v-show="!flag"
            />
            <a-button
              :disabled="current === 3"
              @click="onNext"
              :style="{ backgroundColor: 'rgba(225, 225, 225, 0.5)', borderRadius: '50%' }"
            >
              <icon-forward size="40" :style="{ color: 'black' }" />
            </a-button>
            <icon-sound-fill size="40" @click="flag2 = !flag2" v-show="flag2" />
            <icon-mute-fill size="40" @click="flag2 = !flag2" v-show="!flag2" />
          </div>
        </div>
      </a-layout-footer>
    </a-layout>
    <br />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.go(-1)
}

const current = ref(1)
const flag = ref(true) // 视频开始暂停控制
const flag2 = ref(true) // 声音播放控制

const onPrev = () => {
  current.value = Math.max(1, current.value - 1)
}

const onNext = () => {
  current.value = Math.min(3, current.value + 1)
}
</script>

<style scoped>
.layout-demo :deep(.arco-layout-header) {
  height: 45vh;
  background-color: rgba(225, 225, 225, 0.8);
}

.layout-demo :deep(.arco-layout-footer) {
  height: 10vh;
  background-color: rgba(225, 225, 225, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-demo :deep(.arco-layout-content) {
  height: 40vh;
  background-color: rgba(225, 225, 225, 0.5);
  border-top-left-radius: 10vw;
  border-top-right-radius: 10vw;
}

/* 步骤 */
.frame-aside {
  margin: 5vw 0 0 5vw;
  width: 80vw;
}

/* 下一个 */
.frame-main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.main-bottom .icon-pause-circle-fill,
.main-bottom .icon-play-circle-fill {
  cursor: pointer;
}

.main-bottom .icon-sound-fill,
.main-bottom .icon-mute-fill {
  cursor: pointer;
}
</style>
